<template>
  <div class="box">
    <Hand title="手机号码修改" :left="true" :iconbool="false" @back="backPrve">
      <p class="p" @click="goFather">提交</p>
    </Hand>
    <van-form class="form">
      <van-cell-group inset>
        <van-field
          v-model="oldNumber"
          name="原手机号"
          label="原手机号"
          placeholder="188-0234-111"
          :rules="[{ required: true, message: '请填写原手机号' }]"
        />
        <!-- <span class="span">发送验证码</span> -->
        <van-field
          v-model="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="newNumber"
          name="新手机号"
          label="新手机号"
          placeholder="新手机号"
          :rules="[{ required: true, message: '请填写新手机号' }]"
        />
      </van-cell-group>
    </van-form>
  </div>
</template>

<script setup>
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showFailToast, showConfirmDialog, showToast } from "vant";
// 请求修改手机号接口
import { updatetel } from "../../api/index.js";
const oldNumber = ref(localStorage.etel);
const password = ref("");
const newNumber = ref("");

const router = useRouter();

const backPrve = () => {
  router.go(-1);
};

// 点击提交修改手机号码
const goFather = () => {
  if (
    password.value !== "" &&
    newNumber.value !== "" &&
    oldNumber.value !== ""
  ) {
    // 如果都有信息就请求修改手机号的接口
    const eid = Number(window.localStorage.token);
    showConfirmDialog({
      message: "是否确定修改手机号码",
    })
      .then(() => {
        router.push("/SetUp");
        updatetel(
          eid,
          Number(newNumber.value),
          Number(oldNumber.value),
          password.value
        )
          .then((res) => {
            if (res.data.message == "失败") {
              showFailToast("修改失败");
            } else {
              showSuccessToast("修改成功");
            }
          })
          .catch((error) => {});
      })
      .catch(() => {
        // on cancel
      });
  } else {
    showFailToast("信息未完善");
  }
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  background: #ecfdfa;
  height: 100vh;
}

.p {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-size: 4.667vw;
  color: #ffffff;
}

.form {
  margin-top: 5.333vw;
  position: relative;
}

.span {
  position: absolute;
  top: 3.333vw;
  right: 12.333vw;
  color: red;
  font-weight: normal;
  font-size: 2.667vw;
}
</style>
